<template>
  <div id="page">
    <header>
      <div class="logo">
        <img src="@/assets/IMAGES/kj-logo.png" alt="" />
      </div>
      <!--标题-->
      <div class="screen-title">
        <h3>集团数据监控</h3>
        <p>{{ currentTime }}</p>
      </div>
    </header>
    <div class="screen-container clearfix">
      <div class="screen-left">
        <div class="header">
          <h3>总体数据</h3>
          <p>Conceptual Data</p>
        </div>
        <div class="data-list">
          <h6>覆盖人群:</h6>
          <div class="value">
            <countTo :startVal="0" :endVal="310102078" separator="," :duration="3000"></countTo>
          </div>
          <h6>活跃用户:</h6>
          <div class="value cursor" @click="jumpDataList('活跃用户')">
            <countTo :startVal="0" :endVal="1201098" separator="," :duration="3000"></countTo>
          </div>
          <h6>付费用户:</h6>
          <div class="value cursor" @click="jumpDataList('付费用户')">
            <countTo :startVal="0" :endVal="18420" separator="," :duration="3000"></countTo>
          </div>
        </div>
        <div class="e-d e-d-leng">
          <div class="header">
            <h3>居家服务占比</h3>
          </div>
          <div id="incomePie"></div>
        </div>
        <div class="e-d">
          <div class="header">
            <h3>慢病服务种类占比</h3>
          </div>
          <div id="ylPie"></div>
        </div>
      </div>
      <div class="screen-center">
        <!--地图-->
        <div id="chart"></div>
        <div class="footer">
          <div class="serve">
            <div class="header">
              <h3>看护类型占比</h3>
            </div>
            <div class="serve-data-list">
              <div id="kh"></div>
            </div>
          </div>
          <div class="serve">
            <div class="header">
              <h3>服务人次</h3>
            </div>
            <div class="serve-data-list">
              <div id="service"></div>
            </div>
          </div>
        </div>

      </div>
      <div class="screen-right">
        <div class="menu-box clearfix">
          <div class="menu-list" v-for="(ite, inde) in menu" :key="inde" @click="selectMenu(ite)">
            <div class="menu-logo">
              <img :src="ite.src" alt="" />
            </div>
            <div class="title">
              <h3>{{ ite.title }}</h3>
            </div>
          </div>
        </div>

        <div class="service-data">
          <div class="header">
            <h3>会员年龄</h3>
          </div>
          <div id="vip-age"></div>
        </div>

        <div class="other-data">
          <div class="header">
            <h3>区域机构占比</h3>
            <div id="area-num"></div>
          </div>
        </div>
      </div>
    </div>
    <!--对话框-->
    <el-dialog title="云养老" :visible.sync="dialogVisible" custom-class="custom-class" center>
      <el-button type="primary" plain class="select-btn" v-for="(item,index) in ylyData" :key="index"
        @click="jumpPage(item.value)">{{item.title}}
      </el-button>
    </el-dialog>
  </div>
</template>
<script>
//中国地图
import geoJson from "@/assets/REGION/china.json";
//省份机构
import pniJSON from '@/assets/JSON/provincial-number-institutions.json';
//会员医疗
import vipYLJson from '@/assets/JSON/vip-yl.json';
//会员养老院
import vipYLYJson from '@/assets/JSON/vip-yly.json';
//会员年龄
import vipAgeJson from '@/assets/JSON/vip-age.json';
//区域机构数量
import areaNumJson from '@/assets/JSON/area-num.json';
//服务人次
import serviceNumJson from '@/assets/JSON/serviceNumJson.json'
import jjJson from '@/assets/JSON/jj.json';
import mbJson from '@/assets/JSON/mb.json';
import khJson from '@/assets/JSON/kh.json';
import * as echarts from "echarts/core";
import countTo from "vue-count-to";

import {
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  GridComponent,
  LegendComponent
} from "echarts/components";
import { MapChart, BarChart, PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  GridComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  PieChart
]);
export default {
  name: "screenHome",
  data() {
    return {
      dialogVisible: false,
      menu: [
        {
          src: require("@/assets/IMAGES/icon_yyl.png"),
          title: "云养老",
          subtitle: "Cloud pension",
          id: 0,
          url: "yyy"
        },
        {
          src: require("@/assets/IMAGES/icon_yyy.png"),
          title: "云医院",
          subtitle: "Cloud hospital",
          id: 1,
          url: "https://hospital.yyanglao.com/pc/#/login"
        },
        {
          src: require("@/assets/IMAGES/icon_yyf.png"),
          title: "云药房",
          subtitle: "Cloud pharmacy",
          id: 2,
          url: "yyf"
        }
      ],
      imgSrc: require("@/assets/IMAGES/icon_map.png"),
      currentTime: this.$base.timeSwitch(new Date(), true),
      proviceData: [],//地图初始点亮
      ylyData: [
        {
          title: "衢江驾驶舱",
          value: "http://220.191.238.249:8090/web/cockpit/#/saasMiddle?resthome=廿里镇敬老院&resthomeId=resthome671032"
        },
        {
          title: "衢州驾驶舱",
          value: "http://220.191.238.9:9080/web/cockpit/#/saasMiddle?resthome=衢州市天颐老人之家&resthomeId=resthome851597"
        },
        {
          title: "诸暨驾驶舱",
          value: "http://220.187.226.227/web/cockpit/#/saasMiddle?resthome=诸暨市枫桥镇敬老院&resthomeId=resthome830332"
        },
        {
          title: "常山驾驶舱",
          value: "http://220.191.237.199:8980/web/livingCockpit/#/saasMiddle?resthome=天马街道示范型居家养老服务中心&resthomeId=resthome835190"
        },
        {
          title: "安吉驾驶舱",
          value: "https://ylxt.vihost.cn/web/cockpit/#/saasMiddle?resthome=安吉县社会福利中心&resthomeId=resthome517750"
        },
      ]
    };
  },
  methods: {
    //数据列表
    jumpDataList(title) {
      console.log(title);
    },
    selectMenu(e) {
      let url = e.url;
      //云药房
      if (url == "yyf") {
        this.getToken();
      } else if (url == "yyy") {
        this.dialogVisible = true;
      }
      //外链
      else if (url.includes("http")) {
        let token = JSON.parse(sessionStorage.getItem("loginInfo")).token;
        //location.href = url + `?token=${token}`;
        window.open(url + `?token=${token}`);
      }
    },
    jumpPage(url) {
      window.open(url);
      this.dialogVisible = false;
    },
    /***云药房获取token**/
    async getToken() {
      let res = await this.$base.axiosPost(
        "https://yydsdev.yiy-tech.cn/server/user/login",
        {
          username: "demo",
          encPassword:
            "$2a$04$eJyhA799Usp63.f4XjAmoOVWrQ9iIw4hqZih1FCz4bw8JeV82/a/i",
          logintype: "backend"
        }
      );
      window.open(
        "https://yydsdev.yiy-tech.cn/manage/#/login?token=" + res.data.token,
        "_blank"
      );
    },
    //地图
    drawMap() {
      var chartDom = document.getElementById("chart");
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;
      echarts.registerMap("china", geoJson);
      myChart.setOption(
        (option = {
          tooltip: {
            trigger: "item",
            triggerOn: "mousemove|click",
            backgroundColor: "#211C35",
            borderWidth: 0,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
            extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);",
            formatter: (e) => {
              if (e.data.count) {
                let valueStr =
                  "机构总数" +
                  "<p style='font-weight:bold;font-size:16px'>" +
                  e.data.count +
                  "</p>";
                return (
                  "<div style='display: flex'><div style='flex: 1;width:30px;height:30px;margin-right:10px;'><img src=" +
                  this.imgSrc +
                  " /></div><div style='flex: 1;'>" +
                  e.name +
                  "<br />" +
                  valueStr +
                  "</div></div>"
                );
              } else {
                return;
              }
            },
          },
          visualMap: {
            type: "piecewise", // 类型为分段型
            min: 0,
            max: 10,
            show: false,
            inRange: {
              color: ["#29243D", "#00D1FF"]
            }
          },
          //通过series 中的data更新数据
          series: [
            {
              name: "中国地图",
              type: "map",
              map: "china",
              label: {
                show: true,
                color: "#fff",
                formatter: e => {
                  if (e.value == 10) {
                    return e.name;
                  } else {
                    return "";
                  }
                }
              },
              left: "center",
              // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
              // layoutSize: 100
              zoom: 1.2,
              itemStyle: {
                areaColor: "#29243D",
                borderColor: '#00D1FF'
              },
              //高亮状态
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: e => {
                    return e.name;
                  }
                },
                itemStyle: {
                  areaColor: "#00D1FF",
                  shadowColor: "#00D1FF",
                  shadowBlur: 5
                }
              },
              //选中
              select: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: e => {
                    return e.name;
                  }
                },
                itemStyle: {
                  areaColor: "#00D1FF",
                  shadowColor: "#00D1FF",
                  shadowBlur: 5
                }
              },
              data: this.proviceData
            }
          ]
        })
      );
      //点击地图
      myChart.on("click", (e) => {
        console.log(e.data.id);
        this.$router.push({ path: "/screen-data-list", query: { title: e.data.name, id: e.data.id } })

      });
      option && myChart.setOption(option);
    },
    //服务数据占比
    drawServiceData() {
      var chartDom = document.getElementById("incomePie");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          formatter: "{b}\n{d}%"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: "{b}\n{d}%"
            },
            data: jjJson.data
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //会员所属医疗机构占比
    drawIncomePie() {
      var chartDom = document.getElementById("incomePie");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          formatter: "{b}<br/>{c}%"
        },
        series: [
          {
            type: "pie",
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            radius: "60%",
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: "{b}\n{c}%"
            },
            data: vipYLJson.data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //会员所属养老机构占比
    drawYLPie() {
      var chartDom = document.getElementById("ylPie");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          formatter: "{b}<br/>{c}%"
        },
        series: [
          {
            type: "pie",
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            radius: "60%",
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: "{b}\n{c}%"
            },
            data: vipYLYJson.data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //会员年龄占比
    drawVipAgeData() {
      var chartDom = document.getElementById("vip-age");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            fontSize: 8,
            color: "#fff"
          }
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['医疗机构', '养老机构']
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        series: vipAgeJson.series
      };

      option && myChart.setOption(option);
    },
    //区域数量
    areaNumPie() {
      var chartDom = document.getElementById("area-num");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          formatter: "{b}<br/>{c}%"
        },
        series: [
          {
            name: "区域机构数量",
            type: "pie",
            radius: "70%",
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: "{b}\n{c}%"
            },
            data: areaNumJson.data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //服务人次
    drawMinServiceCount() {
      var chartDom = document.getElementById("service");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ["#73c0de"],
        tooltip: {
          formatter: "{b}月\n{c}万"
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: "category",
          nameTextStyle: {
            fontSize: 10
          },
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          type: "value",
          name: "(万)",
          nameTextStyle: {
            fontSize: 10
          }
        },
        series: [
          {
            data: serviceNumJson.data,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //初始化地图机构数据
    proviceInitialValue() {
      let proviceData = [];
      for (let i = 0; i < geoJson.features.length; i++) {
        for (let j = 0; j < pniJSON.RECORDS.length; j++) {
          if (geoJson.features[i].properties.id == pniJSON.RECORDS[j].area_code) {
            let obj = {};
            obj.id = pniJSON.RECORDS[j].area_code + "0000";
            obj.name = geoJson.features[i].properties.name;
            if (geoJson.features[i].properties.name == "浙江" || geoJson.features[i].properties.name == "四川" || geoJson.features[i].properties.name == "陕西" || geoJson.features[i].properties.name == "宁夏" || geoJson.features[i].properties.name == "安徽") {
              obj.value = 10;
            } else {
              if (pniJSON.RECORDS[j].count > 0) {
                obj.value = 3;
              }
            }
            obj.count = pniJSON.RECORDS[j].count;
            proviceData.push(obj);
          }
        }
      };
      this.proviceData = proviceData;
    },
    //饼状图统计
    drawPie(val, info) {
      var chartDom = document.getElementById(val);
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;

      option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}\n{c}%"
        },
        color: info.color,
        top: 0,
        visualMap: {
          show: false,
          min: 0,
          max: 60,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            roseType: "radius",
            data: info.data.sort(function (a, b) {
              return a.value - b.value;
            }),
            label: {
              color: "#eee",
              fontSize: 10,
              formatter: "{b}\n{c}%"
            },
            itemStyle: {
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
  },
  filters: {
    numberFilter(e) {
      if (e > 10000) {
        return e / 10000;
      } else if (e > 100000000) {
        return e / 100000000;
      } else {
        return e;
      }
    },
    signFilter(e) {
      if (e > 10000) {
        return "万";
      } else if (e > 100000000) {
        return "亿";
      } else {
        return;
      }
    }
  },
  components: { countTo },
  created() {
    this.proviceInitialValue();
    setInterval(() => {
      this.currentTime = this.$base.timeSwitch(new Date(), true);
    }, 1000);
  },
  mounted() {
    this.$nextTick(() => {
      this.drawMap();
      this.drawServiceData();
      this.drawMinServiceCount();
      this.drawPie('ylPie', mbJson);
      this.drawPie('kh', khJson);
      //this.drawIncomePie();
      //this.drawYLPie();
      this.areaNumPie();
      this.drawVipAgeData();
    });
    window.onresize = () => {
      this.drawMap();
      this.drawServiceData();
      this.drawMinServiceCount();
      this.drawPie('ylPie', mbJson);
      this.drawPie('kh', khJson);
      // this.drawIncomePie();
      //this.drawYLPie();
      this.areaNumPie();
      this.drawVipAgeData();
    };
  }
};
</script>
<style lang="scss" scoped>
#page {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: #18142c;
}

header {
  min-height: 5vh;
  padding: 10px 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #29243d;

  .logo {
    height: 5vh;
    box-sizing: border-box;
  }

  .screen-title {
    color: #ffffff;
    margin-right: 12px;

    h3 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
      text-align: right;
    }

    p {
      font-size: 14px;
      letter-spacing: 1px;
    }
  }
}

.screen-container {
  height: 92vh;
  padding: 0 20px;
  box-sizing: border-box;
}

.screen-left {
  float: left;
  width: 20%;
  padding-top: 20px;
  height: 100%;

  .data-list {
    padding: 8px 0;

    h6 {
      font-size: 14px;
      font-weight: 400;
      color: #bdbdbd;
      margin-bottom: 8px;
    }

    .value {
      font-size: 30px;
      font-family: Arial-BoldMT, Arial;
      font-weight: normal;
      color: #ffffff;
      margin-bottom: 8px;
    }

    .cursor {
      cursor: pointer;
    }

    .value:last-child {
      margin-bottom: 0;
    }
  }


  .e-d {
    margin-top: 17px;
    width: 346px;
    height: 22vh;
    padding: 17px;
    background: #29243d;
    border-radius: 17px;

    #incomePie,
    #ylPie {
      height: 100%;
      width: 100%;
      margin: 0 auto;
    }
  }

  .e-d-leng {
    height: 30vh;
  }
}

.screen-center {
  float: left;
  width: 60%;
  height: 100%;

  #chart {
    height: 70%;
    width: 100%;
  }

  .footer {
    display: flex;
    align-items: center;
  }

  .serve {
    width: 300px;
    padding: 17px;
    margin: 0 12px;
    box-sizing: border-box;
    background: #29243d;
    border-radius: 17px;
  }

  .serve:first-child {
    margin-right: 0;
  }
  .serve:last-child{
    flex: 1;
  }

  #service,
  #kh {
    height: 20vh;
    width: 100%;
    margin: 0 auto;
  }
}

.screen-right {
  float: left;
  width: 20%;
  height: 100%;
  padding-top: 20px;

  .sub-title {
    margin: 17px 0 7px;

    h4 {
      display: inline-block;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 19px;
    }

    p {
      display: inline-block;
      font-size: 12px;
      font-family: ArialMT;
      color: #ffffff;
      line-height: 10px;
    }
  }

  h1 {
    width: 193px;
    height: 31px;
    font-size: 28px;
    font-family: Arial-BoldMT, Arial;
    font-weight: normal;
    color: #ffffff;
    line-height: 32px;
  }


  .provice-data,
  .service-data {
    width: 346px;
    height: 40%;
    padding: 17px;
    background: #29243d;
    border-radius: 17px;
    margin-bottom: 17px;

    #provicePie,
    #vip-age,
    #elderlyPie {
      height: 100%;
    }

    #elderly {
      height: 80%;
    }
  }

  .other-data {
    width: 346px;
    background: #29243d;
    border-radius: 17px;
    padding: 17px;
    margin-bottom: 17px;

    #area-num {
      height: 28vh;
    }
  }
}

.header {
  h3 {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
  }

  p {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: #bdbdbd;
  }
}

.menu-box {
  margin-bottom: 17px;
  height: 10vh;
}

.menu-list {
  float: left;
  width: 32.5%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  padding: 17px;
  display: flex;
  flex-direction: column;
  background: #29243d;
  border-radius: 17px;

  .menu-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    h3 {
      height: 30px;
      font-size: 14px;
      font-weight: 500;
      color: #eee;
      line-height: 30px;
    }
  }

  .go {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .go-right {
      height: 12px;
      width: 12px;
      padding: 8px;
      background-color: #313131;
      border-radius: 50%;
    }
  }
}

.menu-list:nth-child(1),
.menu-list:nth-child(2) {
  margin-right: 1.25%;
}

.select-btn {
  padding: 12px 20px;
  margin-right: 12px;
}
</style>